<!DOCTYPE html>
<html lang="en-us">
    <head>
        
        <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="referrer" content="no-referrer">
<meta name="description" content="Website Description">
<title>
Theme Features - Introduction
</title>



        <meta property="og:title" content="Theme Features - Introduction" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Website Description"/>
<meta property="og:url" content="http://example.com/blog/configuration/"/>
<meta property="og:site_name" content="Introduction"/>




<meta property="og:image" content="http://example.com/home/profile.jpg"/>




        
<link rel="shortcut icon" href="/img/fav.ico">


        





<link rel="stylesheet" href="/css/main.min.daa833377fb1636f8cbfa65c601050bb5475623deb7aa6e6fdde94a064a6185d.css" integrity="sha256-2qgzN3&#43;xY2&#43;Mv6ZcYBBQu1R1Yj3reqbm/d6UoGSmGF0=" crossorigin="anonymous" media="screen">





        
        
        
        
    </head>
    <body>
        <section id="top" class="section">
            
            <div class="container hero  fade-in one ">
                

<h1 class="bold-title is-1">Blog</h1>


            </div>
            
            <div class="section  fade-in two ">
                
<div class="container">
    <hr>
    <nav class="navbar" role="navigation" aria-label="main navigation">
        
        <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false" >
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
        <div class="navbar-menu " id="navMenu">
            
            
            
            
            <a class="navbar-item" href="/">main</a>
            

            
            

            
                
            

            
                
            

            
            
            
            
            
            <a class="navbar-item" href="/#about">About</a>
            
            
            
            
            
                
                
                
                
                  <a class="navbar-item" href="http://example.com/projects/">
                  
                  Project
                  
                  </a>
                
                
            
            
            
            
            
                
                
                
                
                  <a class="navbar-item" href="http://example.com/blog/">
                  
                  Back to Blog
                  
                  </a>
                
                
            
            
            
            
            
            <a class="navbar-item" href="/#lorem">Lorem Ipsum</a>
            
            
            
            

            
            
            <a class="navbar-item" href="/#contact">Contact</a>
            
            

            
            
            
            
            <a class="navbar-item" href="http://example.com/es/">Español</a>
            
            
            
            <a class="navbar-item" href="http://example.com/de/">Deutsch</a>
            
            

            
            
        </div>
    </nav>
    <hr>
</div>



                
<div class="container">
    <h2 class="title is-1 top-pad strong-post-title">
        <a href="http://example.com/blog/configuration/">Theme Features</a>
    </h2>
    <div class="post-data">
        Jul 25, 2020 |
        4 minutes read
    </div>
    
    <div class="blog-share">
        Share this:
        
        <a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Theme%20Features%20http%3a%2f%2fexample.com%2fblog%2fconfiguration%2f" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
            <i class="fab fa-twitter"></i>
            <span class="hidden">Twitter</span>
        </a>
        
        
        <a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http%3a%2f%2fexample.com%2fblog%2fconfiguration%2f" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
            <i class="fab fa-facebook-f"></i>
            <span class="hidden">Facebook</span>
        </a>
        
        
        <a class="icon-pinterest" href="http://pinterest.com/pin/create/button/?url=http%3a%2f%2fexample.com%2fblog%2fconfiguration%2f&amp;description=Theme%20Features" onclick="window.open(this.href, 'pinterest-share','width=580,height=296');return false;">
            <i class="fab fa-pinterest-p"></i>
            <span class="hidden">Pinterest</span>
        </a>
        
        
        <a class="icon-google-plus" href="https://plus.google.com/share?url=http%3a%2f%2fexample.com%2fblog%2fconfiguration%2f" onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
            <i class="fab fa-google-plus-g"></i>
            <span class="hidden">Google+</span>
        </a>
        
    </div>
    
    
    
    <p>
        Tag:
        
        <a href="/tags/code">code</a>
        
    </p>
    
</div>

<div class="container markdown top-pad">
    <p>Here are some helpful tips for setting up this theme.</p>
<h2 id="syntax-highlighting">Syntax Highlighting</h2>
<p>Introduction allows the use of Hugo&rsquo;s rich built-in syntax highlighting capabilities. See <a href="https://gohugo.io/content-management/syntax-highlighting/">Syntax Highlighting</a> in the Hugo docs.</p>
<p>Below is an example configuration for Highlight. See <a href="https://gohugo.io/getting-started/configuration-markup#highlight">Highlight in the Hugo docs</a> for more.</p>
<div class="highlight"><pre style="background-color:#f0f0f0;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml">[markup]
  [markup.highlight]
    codeFences = <span style="color:#007020;font-weight:bold">true</span>
    guessSyntax = <span style="color:#007020;font-weight:bold">false</span>
    hl_Lines = <span style="color:#4070a0">&#34;&#34;</span>
    lineNoStart = <span style="color:#40a070">1</span>
    lineNos = <span style="color:#007020;font-weight:bold">false</span>
    lineNumbersInTable = <span style="color:#007020;font-weight:bold">true</span>
    noClasses = <span style="color:#007020;font-weight:bold">true</span>
    <span style="color:#60a0b0;font-style:italic"># For styles, see https://xyproto.github.io/splash/docs/longer/all.html</span>
    style = <span style="color:#4070a0">&#34;friendly&#34;</span>
    tabWidth = <span style="color:#40a070">4</span>
</code></pre></div><h2 id="shortcodes">Shortcodes</h2>
<p><a href="https://gohugo.io/templates/shortcode-templates/">Custom shortcodes</a> can be added to a <code>layouts/shortcodes/</code> directory in your site root. Below, I use two custom shortcodes to display a data file: the current configuration file for this site! See the <a href="https://github.com/victoriadrake/hugo-theme-introduction/blob/master/exampleSite/content/en/blog/configuration.md">source for this page</a> to understand how to use shortcodes.</p>
<h2 id="show-html-in-posts">Show HTML in Posts</h2>
<p>To ensure Hugo renders any HTML that your shortcode or other additions like Font Awesome uses in posts, make sure these lines for <a href="https://gohugo.io/getting-started/configuration-markup">the Goldmark renderer</a> are in your <code>config.toml</code>:</p>
<div class="highlight"><pre style="background-color:#f0f0f0;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml">[markup]
defaultMarkdownHandler = <span style="color:#4070a0">&#34;goldmark&#34;</span>

[markup.goldmark]

[markup.goldmark.renderer]
unsafe = <span style="color:#007020;font-weight:bold">true</span>
</code></pre></div><h2 id="configuration">Configuration</h2>
<p>Introduction can be easily configured using <a href="https://gohugo.io/getting-started/configuration/">Hugo&rsquo;s configuration file</a>. You can copy the <code>config.toml</code> in the <code>exampleSite/</code> to your site root get started.</p>
<p>Here are all the options included in the configuration file for this example site!</p>
<div class="highlight"><pre style="background-color:#f0f0f0;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-toml" data-lang="toml">
baseURL                          = <span style="color:#4070a0">&#34;http://example.com/&#34;</span>   <span style="color:#60a0b0;font-style:italic"># Your domain name. Must end with &#34;/&#34;</span>
theme                            = <span style="color:#4070a0">&#34;introduction&#34;</span>
DefaultContentLanguage           = <span style="color:#4070a0">&#34;en&#34;</span>                    <span style="color:#60a0b0;font-style:italic"># Default language for multilingual sites</span>
<span style="color:#60a0b0;font-style:italic"># disqusshortname                 = &#34;&#34;                     # https://gohugo.io/content-management/comments</span>
<span style="color:#60a0b0;font-style:italic"># googleAnalytics                 = &#34;&#34;                     # https://gohugo.io/templates/internal/#google-analytics</span>

[params]
    themeStyle                   = <span style="color:#4070a0">&#34;light&#34;</span>                 <span style="color:#60a0b0;font-style:italic"># Choose &#34;light&#34; or &#34;dark&#34;</span>
    favicon                      = <span style="color:#4070a0">&#34;/img/fav.ico&#34;</span>          <span style="color:#60a0b0;font-style:italic"># Path to favicon file</span>
    showRSSButton                = <span style="color:#007020;font-weight:bold">false</span>                   <span style="color:#60a0b0;font-style:italic"># Show rss button in navigation</span>
    fadeIn                       = <span style="color:#007020;font-weight:bold">true</span>                    <span style="color:#60a0b0;font-style:italic"># Turn on/off the fade-in effect</span>
    fadeInIndex                  = <span style="color:#007020;font-weight:bold">false</span>                   <span style="color:#60a0b0;font-style:italic"># Turn on/off the fade-in effect on the index page even if fade-in was otherwise turned off</span>
    dateFormat                   = <span style="color:#4070a0">&#34;Jan 2, 2006&#34;</span>
    email                        = <span style="color:#4070a0">&#34;youremail@email.com&#34;</span>   <span style="color:#60a0b0;font-style:italic"># E-mail address for contact section</span>
    <span style="color:#60a0b0;font-style:italic"># customCSS                  = [&#34;foo.css&#34;]             # Include custom css files placed under assets/</span>

    <span style="color:#60a0b0;font-style:italic"># Configure the home page</span>
    [params.home]
        introHeight              = <span style="color:#4070a0">&#34;fullheight&#34;</span>            <span style="color:#60a0b0;font-style:italic"># Input either &#34;medium&#34; or &#34;large&#34; or &#34;fullheight&#34;</span>
        showLatest               = <span style="color:#007020;font-weight:bold">true</span>                    <span style="color:#60a0b0;font-style:italic"># Show latest blog post summary</span>
        showAllPosts             = <span style="color:#007020;font-weight:bold">false</span>                   <span style="color:#60a0b0;font-style:italic"># Set true to list all posts on home page, or set false to link to separate blog list page</span>
        numberOfProjectsToShow   = <span style="color:#40a070">3</span>                       <span style="color:#60a0b0;font-style:italic"># Maximum number of projects to show on home page. Unset or comment out to show all projects</span>
        localTime                = <span style="color:#007020;font-weight:bold">true</span>                    <span style="color:#60a0b0;font-style:italic"># Show your current local time in contact section</span>
        timeZone                 = <span style="color:#4070a0">&#34;America/Los_Angeles&#34;</span>   <span style="color:#60a0b0;font-style:italic"># Your timezone as in the TZ* column of this list: https://en.wikipedia.org/wiki/List_of_tz_database_time_zones</span>
        timeFormat               = <span style="color:#4070a0">&#34;h:mm A&#34;</span>                <span style="color:#60a0b0;font-style:italic"># https://momentjs.com/docs/#/displaying/format/</span>
    [params.projects]
        useTwoColumns            = <span style="color:#007020;font-weight:bold">false</span>                   <span style="color:#60a0b0;font-style:italic"># Use a layout with two columns instead of three</span>

    <span style="color:#60a0b0;font-style:italic"># Share buttons on blog post pages</span>
    [params.share]
        twitter                  = <span style="color:#007020;font-weight:bold">true</span>
        facebook                 = <span style="color:#007020;font-weight:bold">true</span>
        googlePlus               = <span style="color:#007020;font-weight:bold">true</span>
        pinterest                = <span style="color:#007020;font-weight:bold">true</span>

    <span style="color:#60a0b0;font-style:italic"># Social icons appear in introduction and contact section. Add as many more as you like.</span>
    <span style="color:#60a0b0;font-style:italic"># Icon pack &#34;fab&#34; includes social network icons, see: https://fontawesome.com/icons?d=gallery&amp;s=brands&amp;m=free</span>
    <span style="color:#60a0b0;font-style:italic"># Icon pack &#34;fas&#34; includes solid style icons, see: https://fontawesome.com/icons?d=gallery&amp;s=solid&amp;m=free</span>
    [[params.social]]
        url   = <span style="color:#4070a0">&#34;https://twitter.com/&#34;</span>
        icon  = <span style="color:#4070a0">&#34;twitter&#34;</span> <span style="color:#60a0b0;font-style:italic"># icon name without the &#39;fa-&#39;</span>
        icon_pack = <span style="color:#4070a0">&#34;fab&#34;</span>
    [[params.social]]
        url   = <span style="color:#4070a0">&#34;https://facebook.com/&#34;</span>
        icon  = <span style="color:#4070a0">&#34;facebook-f&#34;</span> <span style="color:#60a0b0;font-style:italic"># icon name without the &#39;fa-&#39;</span>
        icon_pack = <span style="color:#4070a0">&#34;fab&#34;</span>
    [[params.social]]
        url   = <span style="color:#4070a0">&#34;https://linkedin.com/&#34;</span>
        icon  = <span style="color:#4070a0">&#34;linkedin-in&#34;</span> <span style="color:#60a0b0;font-style:italic"># icon name without the &#39;fa-&#39;</span>
        icon_pack = <span style="color:#4070a0">&#34;fab&#34;</span>
    [[params.social]]
        url = <span style="color:#4070a0">&#34;mailto:youremail@email.com&#34;</span>  <span style="color:#60a0b0;font-style:italic"># For a direct email link, use &#34;mailto:test@example.org&#34;.</span>
        icon = <span style="color:#4070a0">&#34;paper-plane&#34;</span> <span style="color:#60a0b0;font-style:italic"># icon name without the &#39;fa-&#39;</span>
        icon_pack = <span style="color:#4070a0">&#34;fas&#34;</span>
    [[params.social]]
        url   = <span style="color:#4070a0">&#34;https://mastodon.social/&#34;</span>
        icon  = <span style="color:#4070a0">&#34;mastodon&#34;</span> <span style="color:#60a0b0;font-style:italic"># icon name without the &#39;fa-&#39;</span>
        icon_pack = <span style="color:#4070a0">&#34;fab&#34;</span>
        html_attributes = <span style="color:#4070a0">&#34;rel=\&#34;me\&#34;&#34;</span> <span style="color:#60a0b0;font-style:italic"># Add rel attribute for Mastodon profile link verification</span>


<span style="color:#60a0b0;font-style:italic"># If you don&#39;t want to use the default menu, you can define one by yourself</span>
<span style="color:#60a0b0;font-style:italic"># [[menu.main]]</span>
<span style="color:#60a0b0;font-style:italic">#     name    = &#34;Home&#34;</span>
<span style="color:#60a0b0;font-style:italic">#     url     = &#34;/&#34;</span>
<span style="color:#60a0b0;font-style:italic">#     weight  = 0</span>
<span style="color:#60a0b0;font-style:italic"># [[menu.main]]</span>
<span style="color:#60a0b0;font-style:italic">#     name    = &#34;Blog&#34;</span>
<span style="color:#60a0b0;font-style:italic">#     url     = &#34;/blog/&#34;</span>
<span style="color:#60a0b0;font-style:italic">#     weight  = 1</span>

<span style="color:#60a0b0;font-style:italic"># We only use tag as a taxonomies</span>
<span style="color:#60a0b0;font-style:italic"># You can add more by yourself</span>
[taxonomies]
  tag = <span style="color:#4070a0">&#34;tags&#34;</span>

[markup]
  defaultMarkdownHandler = <span style="color:#4070a0">&#34;goldmark&#34;</span>
  [markup.goldmark]
  [markup.goldmark.renderer]
    unsafe = <span style="color:#007020;font-weight:bold">true</span>
  [markup.highlight]
    codeFences = <span style="color:#007020;font-weight:bold">true</span>
    guessSyntax = <span style="color:#007020;font-weight:bold">false</span>
    hl_Lines = <span style="color:#4070a0">&#34;&#34;</span>
    lineNoStart = <span style="color:#40a070">1</span>
    lineNos = <span style="color:#007020;font-weight:bold">false</span>
    lineNumbersInTable = <span style="color:#007020;font-weight:bold">true</span>
    noClasses = <span style="color:#007020;font-weight:bold">true</span>
    <span style="color:#60a0b0;font-style:italic"># For styles, see https://xyproto.github.io/splash/docs/longer/all.html</span>
    style = <span style="color:#4070a0">&#34;friendly&#34;</span>
    tabWidth = <span style="color:#40a070">4</span>

[languages]
    [languages.en]
        languageName     = <span style="color:#4070a0">&#34;English&#34;</span>
        languageCode     = <span style="color:#4070a0">&#34;en-us&#34;</span>
        contentDir       = <span style="color:#4070a0">&#34;content/en&#34;</span>
        weight           = <span style="color:#40a070">0</span>
        title            = <span style="color:#4070a0">&#34;Introduction&#34;</span>
        [languages.en.params]
            description  = <span style="color:#4070a0">&#34;Website Description&#34;</span>   <span style="color:#60a0b0;font-style:italic"># Max 160 characters show in search results</span>
            <span style="color:#60a0b0;font-style:italic"># footerText   = &#34;&#34;                      # Text to override default footer text (markdown allowed)</span>

    [languages.es]
        languageName     = <span style="color:#4070a0">&#34;Español&#34;</span>
        languageCode     = <span style="color:#4070a0">&#34;es&#34;</span>
        contentDir       = <span style="color:#4070a0">&#34;content/es&#34;</span>
        weight           = <span style="color:#40a070">1</span>
        title            = <span style="color:#4070a0">&#34;Introducción&#34;</span>
        [languages.es.params]
            description  = <span style="color:#4070a0">&#34;Descripcion del sitio web&#34;</span>
            <span style="color:#60a0b0;font-style:italic"># footerText   = &#34;&#34;</span>

    [languages.de]
        languageName     = <span style="color:#4070a0">&#34;Deutsch&#34;</span>
        languageCode     = <span style="color:#4070a0">&#34;de&#34;</span>
        contentDir       = <span style="color:#4070a0">&#34;content/de&#34;</span>
        weight           = <span style="color:#40a070">2</span>
        title            = <span style="color:#4070a0">&#34;Vorstellung&#34;</span>
        [languages.de.params]
            dateFormat   = <span style="color:#4070a0">&#34;2. January 2006&#34;</span>
            description  = <span style="color:#4070a0">&#34;Beschreibung der Webseite&#34;</span>
            <span style="color:#60a0b0;font-style:italic"># footerText   = &#34;&#34;</span>


</code></pre></div>
</div>





                
                <div class="container">
    <hr>
</div>
<div class="container has-text-centered top-pad">
    <a href="#top">
        <i class="fa fa-arrow-up"></i>
    </a>
</div>

<div class="container">
    <hr>
</div>

                <div class="section" id="footer">
    <div class="container has-text-centered">
    
        <span class="footer-text">
            <a href="https://github.com/victoriadrake/hugo-theme-introduction/"><strong>Introduction</strong></a> theme for <a href="http://gohugo.io/">Hugo</a>. Made with <a href="https://victoria.dev"><i class="fa fa-heart"></i> and <i class="fa fa-coffee"></i></a> by open source contributors.
        </span>
    
    </div>
</div>

                
            </div>
        </section>
        
        


<script src="http://example.com/js/bundle.e6934e69d06bb8a213134f4c1468f9478bb7755e786dfb60e3c5a917c5335805.js" integrity="sha256-5pNOadBruKITE09MFGj5R4u3dV54bftg48WpF8UzWAU="></script>



        
        
        
        
    </body>
</html>
